<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta 
    http-equiv="X-UA-Compatible" 
    content="ie=edge">
  <meta 
    name="theme-color" 
    content="#fff" 
    id="theme-color">
  <meta 
    name="description" 
    content="霜序廿的个人网站">
  <link 
    rel="icon" 
    href="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
  <title>如何让10万条数据的小程序列表如丝般顺滑</title>
  
    
      <meta 
        property="og:title" 
        content="如何让10万条数据的小程序列表如丝般顺滑">
    
    
      <meta 
        property="og:url" 
        content="https://shuangxunian.github.io/2021/06/13/HowDoYouMakeAListOf100000PiecesOfDataASilkyLittleProgram/index.html">
    
    
      <meta 
        property="og:img" 
        content="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
    
    
      <meta 
        property="og:img" 
        content="如题目">
    
    
      <meta 
        property="og:type" 
        content="article">
      <meta 
        property="og:article:published_time" 
        content="2021-06-13">
      <meta 
        property="og:article:modified_time" 
        content="2021-06-03">
      <meta 
        property="og:article:author" 
        content="霜序廿">
      
        
          <meta 
            property="og:article:tag" 
            content="微信小程序">
        
      
    
  
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
    function loadCSS(href, data, attr) {
      var sheet = document.createElement('link');
      sheet.ref = 'stylesheet';
      sheet.href = href;
      sheet.dataset[data] = attr;
      document.head.appendChild(sheet);
    }
    function changeCSS(cssFile, data, attr) {
      var oldlink = document.querySelector(data);
      var newlink = document.createElement("link");
      newlink.setAttribute("rel", "stylesheet");
      newlink.setAttribute("href", cssFile);
      newlink.dataset.prism = attr;
      document.head.replaceChild(newlink, oldlink);
    }
  </script>
  
    
      
      
      
      
        
        
        
        <script>
          function prismThemeChange() {
            if(document.getElementById('theme-color').dataset.mode === 'dark') {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism-tomorrow.min.css', '[data-prism]', 'prism-tomorrow');
              } else {
                loadCSS('/js/lib/prism/prism-tomorrow.min.css', 'prism', 'prism-tomorrow');
              }
            } else {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism.min.css', '[data-prism]', 'prism');
              } else {
                loadCSS('/js/lib/prism/prism.min.css', 'prism', 'prism');
              }
            }
          }
          prismThemeChange()
        </script>
      
      
        
        <link rel="stylesheet" href="/js/lib/prism/prism-line-numbers.min.css">
      
    
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
  </script>
  
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
        prismThemeChange();
      }
    };
    setDarkmode();
    </script>
  
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
  
  <link rel="stylesheet" href="/css/main.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
  
    <link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
  
<meta name="generator" content="Hexo 5.4.0"></head>

  <body>
    <div class="wrapper">
       
      <nav class="navbar">
  <div class="navbar-logo">
    <span class="navbar-logo-main">
      
        <img 
          class="navbar-logo-img" 
          src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
          alt="blog logo">
      
      <span class="navbar-logo-dsc">霜序廿的个人网站</span>
    </span>
  </div>
  <div class="navbar-menu">
    
      <a 
        href="/" 
        class="navbar-menu-item">
        
          首页
        
      </a>
    
      <a 
        href="/archives" 
        class="navbar-menu-item">
        
          归档
        
      </a>
    
      <a 
        href="/tags" 
        class="navbar-menu-item">
        
          标签
        
      </a>
    
      <a 
        href="/categories" 
        class="navbar-menu-item">
        
          分类
        
      </a>
    
      <a 
        href="/about" 
        class="navbar-menu-item">
        
          关于
        
      </a>
    
      <a 
        href="/links" 
        class="navbar-menu-item">
        
          友链
        
      </a>
    
    <a 
      class="navbar-menu-item darknavbar" 
      id="dark">
      <i class="iconfont icon-weather"></i>
    </a>
    <a 
      class="navbar-menu-item searchnavbar" 
      id="search">
      <i 
        class="iconfont icon-search" 
        style="font-size: 1.2rem; font-weight: 400;">
      </i>
    </a>
  </div>
</nav> 
      
      <div 
        id="local-search" 
        style="display: none">
        <input
          class="navbar-menu-item"
          id="search-input"
          placeholder="请输入搜索内容..." />
        <div id="search-content"></div>
      </div>
      
      <div class="section-wrap">
        <div class="container">
          <div class="columns">
            <main class="main-column">
<article class="card card-content">
  <header>
    <h1 class="post-title">
      如何让10万条数据的小程序列表如丝般顺滑
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2021-06-13T13:48:56.118Z">
      <i 
        class="iconfont icon-calendar" 
        style="margin-right: 2px;">
      </i>
      <span>2021-06-13</span>
    </time>
    
      <span class="dot"></span>
      
        <a 
          href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/" 
          class="post-meta-link">
          技术文章
        </a>
      
    
    
      <span class="dot"></span>
      <span>2.8k 字</span>
    
  </div>
  
    <div 
      class="post-meta post-show-meta" 
      style="margin-top: -10px;">
      <div style="display: flex; align-items: center;">
        <i 
          class="iconfont icon-biaoqian" 
          style="margin-right: 2px; font-size: 1.15rem;">
        </i>
        
          
          <a 
            href="/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" 
            class="post-meta-link">
            微信小程序
          </a>
        
      </div>
    </div>
  
  </header>
  <div 
    id="section" 
    class="post-content">
    <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>某天闲着无聊想练一下手速，去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后，是列表居然出现了白屏。看了一下控制台：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/e33667c4-0763-42ba-a521-0199a28d5b06-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/e33667c4-0763-42ba-a521-0199a28d5b06-3807603.jpg"></p>
<p>‘Dom limit exceeded’，dom数超出了限制， 不知道微信是出于什么考虑，要限制页面的dom数量。</p>
<h2 id="小程序页面限制多少个wxml节点？"><a href="#小程序页面限制多少个wxml节点？" class="headerlink" title="小程序页面限制多少个wxml节点？"></a>小程序页面限制多少个wxml节点？</h2><p>写了个小dome做了个测试。listData的数据结构为：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">listData<span class="token operator">:</span><span class="token punctuation">[</span>
   <span class="token punctuation">&#123;</span>
    isDisplay<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
    itemList<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">&#123;</span>
          qus<span class="token operator">:</span><span class="token string">'下面哪位是刘发财女朋友?'</span><span class="token punctuation">,</span>
          answerA<span class="token operator">:</span><span class="token string">'刘亦菲'</span><span class="token punctuation">,</span>
          answerB<span class="token operator">:</span><span class="token string">'迪丽热巴'</span><span class="token punctuation">,</span>
          answerC<span class="token operator">:</span><span class="token string">'斋藤飞鸟'</span><span class="token punctuation">,</span>
          answerD<span class="token operator">:</span><span class="token string">'花泽香菜'</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#125;</span>
      <span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">.</span><span class="token comment">//20条数据</span>
     <span class="token punctuation">]</span>
   <span class="token punctuation">&#125;</span>
<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>页面渲染效果：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/2fb11f0c-2704-4a9d-9fff-667c09612f0e-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/2fb11f0c-2704-4a9d-9fff-667c09612f0e-3807603.jpg"></p>
<h3 id="dome1"><a href="#dome1" class="headerlink" title="dome1"></a>dome1</h3><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&#123;&#123;listData&#125;&#125;<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first-item<span class="token punctuation">"</span></span>  <span class="token attr-name"><span class="token namespace">wx:</span>for-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>firstItem<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&#123;&#123;firstItem.isDisplay&#125;&#125;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-list<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&#123;&#123;firstItem.itemList&#125;&#125;<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>&#123;&#123;item.qus&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>answer-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>A. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">></span></span>&#123;&#123;item.answerA&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>B. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">></span></span>&#123;&#123;item.answerB&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>C. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">></span></span>&#123;&#123;item.answerC&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>D. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">></span></span>&#123;&#123;item.answerD&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>       
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/14d57d96-03a3-4cbd-85f8-dbabd07b8d8e-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/14d57d96-03a3-4cbd-85f8-dbabd07b8d8e-3807603.jpg"></p>
<h3 id="dome2"><a href="#dome2" class="headerlink" title="dome2"></a>dome2</h3><p>删除了不必要的dom嵌套</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/0fb18814-2406-40f1-a7c7-7723ad307506-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/0fb18814-2406-40f1-a7c7-7723ad307506-3807603.jpg"></p>
<p>通过大致计算，一个小程序页面大概可以渲染2万个wxml节点 而小程序官方的性能测评得分条件为少于1000个wxml节点<a target="_blank" rel="noopener" href="https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html">官方链接</a> 5. setData数据大小</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/c411b853-44a7-4ba6-b7d4-8b1ef4944013-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/c411b853-44a7-4ba6-b7d4-8b1ef4944013-3807603.jpg"></p>
<h2 id="列表页面优化"><a href="#列表页面优化" class="headerlink" title="列表页面优化"></a>列表页面优化</h2><h3 id="减少不必要的标签嵌套"><a href="#减少不必要的标签嵌套" class="headerlink" title="减少不必要的标签嵌套"></a>减少不必要的标签嵌套</h3><p>由上面的测试dome可知，在不影响代码运行和可读性的前提下，尽量减少标签的嵌套，可以大幅的增加页面数据的列表条数，毕竟公司不是按代码行数发工资的。如果你的列表数据量有限，可以用这种方法来增加列表渲染条数。如果数据量很大，再怎么精简也超过2万的节点，这个方法则不适用。</p>
<h3 id="优化setData的使用"><a href="#优化setData的使用" class="headerlink" title="优化setData的使用"></a>优化setData的使用</h3><p>如图五所示，小程序setDate的性能会受到setData数据量大小和调用频率限制。所以要围绕减少每一次setData数据量大小，降低setData调用频率进行优化。</p>
<h4 id="删除冗余字段"><a href="#删除冗余字段" class="headerlink" title="删除冗余字段"></a>删除冗余字段</h4><p>后端的同事经常把数据从数据库中取出就直接返回给前端，不经过任何处理，所以会导致数据大量的冗余，很多字段根本用不到，我们需要把这些字段删除，减少setDate的数据大小。</p>
<h4 id="setData的进阶用法"><a href="#setData的进阶用法" class="headerlink" title="setData的进阶用法"></a>setData的进阶用法</h4><p>通常，我们对data中数据的增删改操作，是把原来的数据取出，处理，然后用setData整体去更新，比如我们列表中使用到的上拉加载更多，需要往listData尾部添加数据：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">newList<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    listData<span class="token operator">:</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>listData<span class="token punctuation">,</span><span class="token operator">...</span>newList<span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<p>这样会导致setDate的数据量越来越大，页面也越来越卡。</p>
<h4 id="setDate的正确使用姿势"><a href="#setDate的正确使用姿势" class="headerlink" title="setDate的正确使用姿势"></a>setDate的正确使用姿势</h4><p><strong>setDate修改数据</strong><br>比如我们要修改数组listData第一个元素的isDisplay属性，我们可以这样操作：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> index<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
  <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>index<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<p>如果我们想同时修改数组listData中下标从0到9的元素的isDisplay属性，那要如何处理呢？你可能会想到用for循环来执行setData：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> index<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>index<span class="token operator">&lt;</span><span class="token number">10</span><span class="token punctuation">;</span>index<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>index<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>那么这样就会导致另外一个问题，那就是listData的调用过于频繁，也会导致性能问题，正确的处理方式是先把要修改的数据先收集起来，然后调用setData一次处理完成：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> changeData<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> index<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>index<span class="token operator">&lt;</span><span class="token number">10</span><span class="token punctuation">;</span>index<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  changeData<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>index<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>changeData<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>这样我们就把数组listData中下标从0到9的元素的isDisplay属性改成了false。</p>
<p><strong>setDate往数组末尾添加数据</strong><br>如果只添加一条数据</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> newData<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
  <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>listData<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span>newData
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>如果是添加多条数据</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> newData<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> changeData<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> index<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>listData<span class="token punctuation">.</span>length
newData<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  newData<span class="token punctuation">[</span><span class="token string">'listData['</span> <span class="token operator">+</span> <span class="token punctuation">(</span>index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">']'</span><span class="token punctuation">]</span> <span class="token operator">=</span> item <span class="token comment">//赋值，索引递增</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span> 
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>changeData<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="使用自定义组件"><a href="#使用自定义组件" class="headerlink" title="使用自定义组件"></a>使用自定义组件</h2><p>可以把列表的一行或者多行封装到自定义组件里，在列表页使用一个组件，只算一个节点，这样你的列表能渲染的数据可以成倍数的增加。组件内的节点数也是有限制的，但是你可以一层层嵌套组件实现列表的无限加载，如果你不怕麻烦的话</p>
<h2 id="使用虚拟列表"><a href="#使用虚拟列表" class="headerlink" title="使用虚拟列表"></a>使用虚拟列表</h2><p>经过上面的一系列操作后，列表的性能会得到很大的提升，但是如果数据量实在太大，wxml节点数也会超出限制，导致页面发生错误。我们的处理方法是使用虚拟列表，页面只渲染当前可视区域以及可视区域上下若干条数据的节点，通过isDisplay控制节点的渲染。</p>
<ul>
<li>可视区域上方：above</li>
<li>可视区域：screen</li>
<li>可视区域下方：below</li>
</ul>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/6a2b102c-73c5-4f00-b762-1c6ab7a5e4be-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/6a2b102c-73c5-4f00-b762-1c6ab7a5e4be-3807603.jpg"></p>
<h3 id="listData数组的结构"><a href="#listData数组的结构" class="headerlink" title="listData数组的结构"></a>listData数组的结构</h3><p>使用二维数组，因为如果是一维数组，页面滚动需要用setData设置大量的元素isDispaly属性来控制列表的的渲染。而二维数组可以这可以一次调用setData控制十条，二十条甚至更多的数据的渲染。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">listData<span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">&#123;</span>
  isDisplay<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
  itemList<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">&#123;</span>
    qus<span class="token operator">:</span><span class="token string">'下面哪位是刘发财女朋友?'</span><span class="token punctuation">,</span>
    answerA<span class="token operator">:</span><span class="token string">'刘亦菲'</span><span class="token punctuation">,</span>
    answerB<span class="token operator">:</span><span class="token string">'迪丽热巴'</span><span class="token punctuation">,</span>
    answerC<span class="token operator">:</span><span class="token string">'斋藤飞鸟'</span><span class="token punctuation">,</span>
    answerD<span class="token operator">:</span><span class="token string">'花泽香菜'</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span>
  <span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">.</span><span class="token comment">//二维数组中的条数根据项目实际情况</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="必要的参数"><a href="#必要的参数" class="headerlink" title="必要的参数"></a>必要的参数</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">data<span class="token punctuation">&#123;</span>
  itemHeight<span class="token operator">:</span><span class="token number">4520</span><span class="token punctuation">,</span><span class="token comment">//列表第一层dom高度，单位为rpx</span>
  itemPxHeight<span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span><span class="token comment">//转化为px高度,因为小程序获取的滚动条高度单位为px</span>
  aboveShowIndex<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token comment">//已渲染数据的第一条的Index</span>
  belowShowNum<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token comment">//显示区域下方隐藏的条数</span>
  oldSrollTop<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token comment">//记录上一次滚动的滚动条高度，判断滚动方向</span>
  prepareNum<span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token comment">//可视区域上下方要渲染的数量</span>
  throttleTime<span class="token operator">:</span><span class="token number">200</span>，<span class="token comment">//滚动事件节流的时间，单位ms</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="wxml的dom结构"><a href="#wxml的dom结构" class="headerlink" title="wxml的dom结构"></a>wxml的dom结构</h3><pre class="line-numbers language-html" data-language="html"><code class="language-html"> <span class="token comment">&lt;!-- above区域的 --></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>above-box<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token selector">height:</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#123;</span>aboveShowIndex*itemHeight<span class="token punctuation">&#125;</span><span class="token punctuation">&#125;</span>rpx</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
<span class="token comment">&lt;!-- 实际渲染的区域的 --></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&#123;&#123;listData&#125;&#125;<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first-item<span class="token punctuation">"</span></span>  <span class="token attr-name"><span class="token namespace">wx:</span>for-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>firstItem<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&#123;&#123;firstItem.isDisplay&#125;&#125;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-list<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&#123;&#123;firstItem.itemList&#125;&#125;<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>&#123;&#123;item.qus&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>answer-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>A. &#123;&#123;item.answerA&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>B. &#123;&#123;item.answerB&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>C. &#123;&#123;item.answerC&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">></span></span>D. &#123;&#123;item.answerD&#125;&#125;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>   
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span>
 <span class="token comment">&lt;!-- below区域的 --></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>below-box<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token selector">height:</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#123;</span>belowShowNum*itemHeight<span class="token punctuation">&#125;</span><span class="token punctuation">&#125;</span>rpx</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="获取列表第一层dom的px高度"><a href="#获取列表第一层dom的px高度" class="headerlink" title="获取列表第一层dom的px高度"></a>获取列表第一层dom的px高度</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> query <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
query<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">boundingClientRect</span><span class="token punctuation">(</span><span class="token parameter">rect</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
  <span class="token keyword">let</span> clientWidth <span class="token operator">=</span> rect<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
  <span class="token keyword">let</span> ratio <span class="token operator">=</span> <span class="token number">750</span> <span class="token operator">/</span> clientWidth<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    itemPxHeight<span class="token operator">:</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>itemHeight<span class="token operator">/</span>ratio<span class="token punctuation">)</span><span class="token punctuation">,</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="页面滚动时间节流"><a href="#页面滚动时间节流" class="headerlink" title="页面滚动时间节流"></a>页面滚动时间节流</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token parameter">fn</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">let</span> valid <span class="token operator">=</span> <span class="token boolean">true</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
     <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
         <span class="token keyword">return</span> <span class="token boolean">false</span> 
     <span class="token punctuation">&#125;</span>
     <span class="token comment">// 工作时间，执行函数并且在间隔期内把状态位设为无效</span>
      valid <span class="token operator">=</span> <span class="token boolean">false</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
          <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
          valid <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>throttleTime<span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="页面滚动事件处理"><a href="#页面滚动事件处理" class="headerlink" title="页面滚动事件处理"></a>页面滚动事件处理</h3><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">  onPageScroll<span class="token operator">:</span><span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">let</span> scrollTop<span class="token operator">=</span>e<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span><span class="token comment">//滚动条高度</span>
  <span class="token keyword">let</span> itemNum<span class="token operator">=</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>scrollTop<span class="token operator">/</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>itemPxHeight<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//计算出可视区域的数据Index</span>
  <span class="token keyword">let</span> clearindex<span class="token operator">=</span>itemNum<span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>prepareNum<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">;</span><span class="token comment">//滑动后需要渲染数据第一条的index</span>
  <span class="token keyword">let</span> oldSrollTop<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>oldSrollTop<span class="token punctuation">;</span><span class="token comment">//滚动前的scrotop,用于判断滚动的方向</span>
  <span class="token keyword">let</span> aboveShowIndex<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>aboveShowIndex；<span class="token comment">//获取已渲染数据第一条的index</span>
  <span class="token keyword">let</span> listDataLen<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>listData<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
  <span class="token keyword">let</span> changeData<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token comment">//向下滚动</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>scrollTop<span class="token operator">-</span>oldSrollTop<span class="token operator">></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>clearindex<span class="token operator">></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token comment">//滚动后需要变更的条数</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span>aboveShowIndex<span class="token punctuation">;</span>i<span class="token operator">&lt;</span>clearindex<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>   
              changeData<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>i<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token boolean">false</span><span class="token punctuation">;</span>
              <span class="token keyword">let</span> belowShowIndex<span class="token operator">=</span>i<span class="token operator">+</span><span class="token number">2</span><span class="token operator">*</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>prepareNum<span class="token punctuation">;</span>
              <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token number">2</span><span class="token operator">*</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>prepareNum<span class="token operator">&lt;</span>listDataLen<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
                changeData<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>belowShowIndex<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token boolean">true</span><span class="token punctuation">;</span>
                <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span>   
      <span class="token punctuation">&#125;</span>    
  <span class="token punctuation">&#125;</span><span class="token keyword">else</span><span class="token punctuation">&#123;</span><span class="token comment">//向上滚动</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>clearindex<span class="token operator">>=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">let</span> changeData<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span>aboveShowIndex<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator">>=</span>clearindex<span class="token punctuation">;</span>i<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
          <span class="token keyword">let</span> belowShowIndex<span class="token operator">=</span>i<span class="token operator">+</span><span class="token number">2</span><span class="token operator">*</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>prepareNum
          <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token number">2</span><span class="token operator">*</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>prepareNum<span class="token operator">&lt;=</span>listDataLen<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
          changeData<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>belowShowIndex<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token boolean">false</span><span class="token punctuation">;</span>
          <span class="token punctuation">&#125;</span>
          changeData<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>i<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>  
      <span class="token punctuation">&#125;</span><span class="token keyword">else</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>aboveShowIndex<span class="token operator">></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
          <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>aboveShowIndex<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
              <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">listData[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>i<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">].isDisplay</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
          <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span>
      <span class="token punctuation">&#125;</span>      
  <span class="token punctuation">&#125;</span>
  clearindex<span class="token operator">=</span>clearindex<span class="token operator">></span><span class="token number">0</span><span class="token operator">?</span>clearindex<span class="token operator">:</span><span class="token number">0</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>clearindex<span class="token operator">>=</span><span class="token number">0</span><span class="token operator">&amp;&amp;</span><span class="token operator">!</span><span class="token punctuation">(</span>clearindex<span class="token operator">></span><span class="token number">0</span><span class="token operator">&amp;&amp;</span>clearindex<span class="token operator">==</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>aboveShowIndex<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    changeData<span class="token punctuation">.</span>aboveShowIndex<span class="token operator">=</span>clearindex<span class="token punctuation">;</span>
    <span class="token keyword">let</span> belowShowNum<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>listData<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>prepareNum<span class="token operator">+</span>clearindex<span class="token punctuation">)</span>
    belowShowNum<span class="token operator">=</span>belowShowNum<span class="token operator">></span><span class="token number">0</span><span class="token operator">?</span>belowShowNum<span class="token operator">:</span><span class="token number">0</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>belowShowNum<span class="token operator">>=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      changeData<span class="token punctuation">.</span>belowShowNum<span class="token operator">=</span>belowShowNum
    <span class="token punctuation">&#125;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>changeData<span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    oldSrollTop<span class="token operator">:</span>scrollTop
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>经过上面的处理后，页面的wxml节点数量相对稳定，可能因为可视区域数据的index计算误差，页面渲染的数据有小幅度的浮动，但是已经完全不会超过小程序页面的节点数量的限制。理论上100万条数据的列表也不会有问题，只要你有耐心和精力一直划列表加载这么多数据。</p>
<p>关于页面滚动可以看看：小程序 tab 滚动列表优化方案</p>
<h3 id="待优化事项"><a href="#待优化事项" class="headerlink" title="待优化事项"></a>待优化事项</h3><ul>
<li>列表每一行的高度需要固定，不然会导致可视区域数据的index的计算出现误差</li>
<li>渲染玩列表后往回来列表，如果手速过快，会导致above，below区域的数据渲染不过来，会出现短暂的白屏，白屏问题可以调整 prepareNum,throttleTime两个参数改善，但是不能完全解决。</li>
<li>如果列表中有图片，above，below区域重新渲染时，图片虽然以经缓存在本地，不需要重新去服务器请求，但是重新渲染还是需要时间，尤其当你手速特别快时。可以根据上面的思路，  isDisplay时只销毁非<image>的节点，这样重新渲染就不需要渲染图片，但是这样节点数还是会增加，不过应该能满足大部分项目需求了，看自己项目怎么取舍。</li>
</ul>
<h2 id="使用自定义组件和虚拟列表的对比。"><a href="#使用自定义组件和虚拟列表的对比。" class="headerlink" title="使用自定义组件和虚拟列表的对比。"></a>使用自定义组件和虚拟列表的对比。</h2><p>虽然不知道为什么，但是直觉告诉我使用自定义组件性能会相对差一点。为了对比两种方法的优劣，使用了Trace工具对一个5000条带图片数据进行了性能测试。</p>
<p><strong>内存占用对比：</strong><br>自定义组件内存占用情况:</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/66e22a1b-b208-4d89-88b2-96b7fdbd0ce1-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/66e22a1b-b208-4d89-88b2-96b7fdbd0ce1-3807603.jpg"></p>
<p>虚拟列表内存占用情况:</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/d8ccc1b1-e768-4766-8d20-283f3b724c50-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/d8ccc1b1-e768-4766-8d20-283f3b724c50-3807603.jpg"></p>
<p>对比可以看出，因为组件在上拉加载时，组件是没有销毁的，导致数据量逐渐增多。而虚拟列表在增加数据的同时，也会销毁相同数量的数据，所以内存占比会稳定在一个数量。具体到这个测试dome,5000条数据使用自定义组件，最后占用2000MB的内存，而虚拟列表稳定在700MB。</p>
<p><strong>setData后重新渲染所用的时间对比：</strong><br>自定义组件重新渲染耗时:</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/23358607-de13-4815-bf15-5b2d09f46fbc-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/23358607-de13-4815-bf15-5b2d09f46fbc-3807603.jpg"></p>
<p>虚拟列表重新渲染耗时:</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://api2.mubu.com/v3/document_image/595eb82f-acda-4fc7-8d31-f324557d69f4-3807603.jpg" class="lozad post-image"src="https://api2.mubu.com/v3/document_image/595eb82f-acda-4fc7-8d31-f324557d69f4-3807603.jpg"></p>
<p>从测试结果可以看出，无论是耗时的次数分布，还是最大耗时，最小耗时，虚拟列表都优于自定义组件</p>
<h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6966904317148299271">如何让10万条数据的小程序列表如丝般顺滑</a></p>

  </div>
  <div>
    
  </div>
</article>
<div class="nav">
  
    <div class="nav-item-prev">
      <a 
        href="/2021/06/13/HowDoYouSetScrollingInCSS/" 
        class="nav-link">
        <i class="iconfont icon-left nav-prev-icon"></i>
        <div>
          <div class="nav-label">上一篇</div>
          
            <div class="nav-title">css中怎么设置滚动？ </div>
          
        </div>
      </a>
    </div>
  
  
    <div class="nav-item-next">
      <a 
        href="/2021/06/13/howDoTechMogulsLearn/" 
        class="nav-link">
        <div>
          <div class="nav-label">下一篇</div>
          
            <div class="nav-title">技术大佬们都是怎么学习的？ </div>
          
        </div>
        <i class="iconfont icon-right nav-next-icon"></i>
      </a>
    </div>
  
</div>

<div 
  class="card card-content toc-card" 
  id="mobiletoc">
  <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2%E9%99%90%E5%88%B6%E5%A4%9A%E5%B0%91%E4%B8%AAwxml%E8%8A%82%E7%82%B9%EF%BC%9F"><span class="toc-text">小程序页面限制多少个wxml节点？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#dome1"><span class="toc-text">dome1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dome2"><span class="toc-text">dome2</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96"><span class="toc-text">列表页面优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%8F%E5%B0%91%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84%E6%A0%87%E7%AD%BE%E5%B5%8C%E5%A5%97"><span class="toc-text">减少不必要的标签嵌套</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E5%8C%96setData%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-text">优化setData的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%86%97%E4%BD%99%E5%AD%97%E6%AE%B5"><span class="toc-text">删除冗余字段</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setData%E7%9A%84%E8%BF%9B%E9%98%B6%E7%94%A8%E6%B3%95"><span class="toc-text">setData的进阶用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setDate%E7%9A%84%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8%E5%A7%BF%E5%8A%BF"><span class="toc-text">setDate的正确使用姿势</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6"><span class="toc-text">使用自定义组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8"><span class="toc-text">使用虚拟列表</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#listData%E6%95%B0%E7%BB%84%E7%9A%84%E7%BB%93%E6%9E%84"><span class="toc-text">listData数组的结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BF%85%E8%A6%81%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-text">必要的参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#wxml%E7%9A%84dom%E7%BB%93%E6%9E%84"><span class="toc-text">wxml的dom结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%88%97%E8%A1%A8%E7%AC%AC%E4%B8%80%E5%B1%82dom%E7%9A%84px%E9%AB%98%E5%BA%A6"><span class="toc-text">获取列表第一层dom的px高度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%97%B6%E9%97%B4%E8%8A%82%E6%B5%81"><span class="toc-text">页面滚动时间节流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-text">页面滚动事件处理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BE%85%E4%BC%98%E5%8C%96%E4%BA%8B%E9%A1%B9"><span class="toc-text">待优化事项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E5%92%8C%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8%E7%9A%84%E5%AF%B9%E6%AF%94%E3%80%82"><span class="toc-text">使用自定义组件和虚拟列表的对比。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
</div></main>
            <aside class="left-column">
              
              <div class="card card-author">
                
  <img 
    src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
    class="author-img" 
    alt="author avatar">

<p class="author-name">霜序廿</p>
<p class="author-description">无限进步</p>
<div class="author-message">
  <a 
    class="author-posts-count" 
    href="/archives">
    <span>253</span>
    <span>文章</span>
  </a>
  <a 
    class="author-categories-count" 
    href="/categories">
    <span>6</span>
    <span>分类</span>
  </a>
  <a 
    class="author-tags-count" 
    href="/tags">
    <span>51</span>
    <span>标签</span>
  </a>
</div>

  <div class="author-card-society">
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://github.com/shuangxunian">
          <i class="iconfont icon-github society-icon"></i>
        </a>
      </div>
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://space.bilibili.com/391117803">
          <i class="iconfont icon-bilibili society-icon"></i>
        </a>
      </div>
    
  </div>

              </div>
               <div class="sticky-tablet">
  
  
    <article class="display-when-two-columns spacer">
      <div class="card card-content toc-card">
        <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2%E9%99%90%E5%88%B6%E5%A4%9A%E5%B0%91%E4%B8%AAwxml%E8%8A%82%E7%82%B9%EF%BC%9F"><span class="toc-text">小程序页面限制多少个wxml节点？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#dome1"><span class="toc-text">dome1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dome2"><span class="toc-text">dome2</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96"><span class="toc-text">列表页面优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%8F%E5%B0%91%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84%E6%A0%87%E7%AD%BE%E5%B5%8C%E5%A5%97"><span class="toc-text">减少不必要的标签嵌套</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E5%8C%96setData%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-text">优化setData的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%86%97%E4%BD%99%E5%AD%97%E6%AE%B5"><span class="toc-text">删除冗余字段</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setData%E7%9A%84%E8%BF%9B%E9%98%B6%E7%94%A8%E6%B3%95"><span class="toc-text">setData的进阶用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setDate%E7%9A%84%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8%E5%A7%BF%E5%8A%BF"><span class="toc-text">setDate的正确使用姿势</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6"><span class="toc-text">使用自定义组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8"><span class="toc-text">使用虚拟列表</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#listData%E6%95%B0%E7%BB%84%E7%9A%84%E7%BB%93%E6%9E%84"><span class="toc-text">listData数组的结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BF%85%E8%A6%81%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-text">必要的参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#wxml%E7%9A%84dom%E7%BB%93%E6%9E%84"><span class="toc-text">wxml的dom结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%88%97%E8%A1%A8%E7%AC%AC%E4%B8%80%E5%B1%82dom%E7%9A%84px%E9%AB%98%E5%BA%A6"><span class="toc-text">获取列表第一层dom的px高度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%97%B6%E9%97%B4%E8%8A%82%E6%B5%81"><span class="toc-text">页面滚动时间节流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-text">页面滚动事件处理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BE%85%E4%BC%98%E5%8C%96%E4%BA%8B%E9%A1%B9"><span class="toc-text">待优化事项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E5%92%8C%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8%E7%9A%84%E5%AF%B9%E6%AF%94%E3%80%82"><span class="toc-text">使用自定义组件和虚拟列表的对比。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
      </div>
    </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header">
    <i 
      class="iconfont icon-fenlei" 
      style="padding-right: 2px;">
    </i>分类
  </div>
  <div class="categories-list">
    
      <a href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">
        <div class="categories-list-item">
          技术文章
          <span class="categories-list-item-badge">218</span>
        </div>
      </a>
    
      <a href="/categories/%E5%85%B6%E4%BB%96/">
        <div class="categories-list-item">
          其他
          <span class="categories-list-item-badge">16</span>
        </div>
      </a>
    
      <a href="/categories/%E6%97%85%E6%B8%B8/">
        <div class="categories-list-item">
          旅游
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
      <a href="/categories/%E7%AE%97%E6%B3%95/">
        <div class="categories-list-item">
          算法
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E8%80%83%E8%AF%95/">
        <div class="categories-list-item">
          考试
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E9%98%85%E8%AF%BB/">
        <div class="categories-list-item">
          阅读
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header">
    <i 
      class="iconfont icon-biaoqian" 
      style="padding-right: 2px;">
    </i>热门标签
  </div>
  <div class="tags-list">
    
      <a 
        href="/tags/js/" 
        title="js">
        <div class="tags-list-item">js</div>
      </a>
    
      <a 
        href="/tags/vue/" 
        title="vue">
        <div class="tags-list-item">vue</div>
      </a>
    
      <a 
        href="/tags/%E9%9D%A2%E8%AF%95/" 
        title="面试">
        <div class="tags-list-item">面试</div>
      </a>
    
      <a 
        href="/tags/css/" 
        title="css">
        <div class="tags-list-item">css</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C/" 
        title="网络">
        <div class="tags-list-item">网络</div>
      </a>
    
      <a 
        href="/tags/%E5%85%B6%E4%BB%96/" 
        title="其他">
        <div class="tags-list-item">其他</div>
      </a>
    
      <a 
        href="/tags/%E7%AE%97%E6%B3%95/" 
        title="算法">
        <div class="tags-list-item">算法</div>
      </a>
    
      <a 
        href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" 
        title="浏览器">
        <div class="tags-list-item">浏览器</div>
      </a>
    
      <a 
        href="/tags/html/" 
        title="html">
        <div class="tags-list-item">html</div>
      </a>
    
      <a 
        href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" 
        title="操作系统">
        <div class="tags-list-item">操作系统</div>
      </a>
    
      <a 
        href="/tags/%E8%80%83%E8%AF%95/" 
        title="考试">
        <div class="tags-list-item">考试</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" 
        title="软实力">
        <div class="tags-list-item">软实力</div>
      </a>
    
      <a 
        href="/tags/DOM/" 
        title="DOM">
        <div class="tags-list-item">DOM</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AE%E5%AD%90/" 
        title="轮子">
        <div class="tags-list-item">轮子</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C%E5%8E%9F%E7%90%86/" 
        title="网络原理">
        <div class="tags-list-item">网络原理</div>
      </a>
    
      <a 
        href="/tags/debug/" 
        title="debug">
        <div class="tags-list-item">debug</div>
      </a>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
            <aside class="right-column">
              <div class="sticky-widescreen">
  
  
    <article class="card card-content toc-card">
      <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2%E9%99%90%E5%88%B6%E5%A4%9A%E5%B0%91%E4%B8%AAwxml%E8%8A%82%E7%82%B9%EF%BC%9F"><span class="toc-text">小程序页面限制多少个wxml节点？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#dome1"><span class="toc-text">dome1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dome2"><span class="toc-text">dome2</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96"><span class="toc-text">列表页面优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%8F%E5%B0%91%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84%E6%A0%87%E7%AD%BE%E5%B5%8C%E5%A5%97"><span class="toc-text">减少不必要的标签嵌套</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E5%8C%96setData%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-text">优化setData的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%86%97%E4%BD%99%E5%AD%97%E6%AE%B5"><span class="toc-text">删除冗余字段</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setData%E7%9A%84%E8%BF%9B%E9%98%B6%E7%94%A8%E6%B3%95"><span class="toc-text">setData的进阶用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setDate%E7%9A%84%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8%E5%A7%BF%E5%8A%BF"><span class="toc-text">setDate的正确使用姿势</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6"><span class="toc-text">使用自定义组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8"><span class="toc-text">使用虚拟列表</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#listData%E6%95%B0%E7%BB%84%E7%9A%84%E7%BB%93%E6%9E%84"><span class="toc-text">listData数组的结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BF%85%E8%A6%81%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-text">必要的参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#wxml%E7%9A%84dom%E7%BB%93%E6%9E%84"><span class="toc-text">wxml的dom结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%88%97%E8%A1%A8%E7%AC%AC%E4%B8%80%E5%B1%82dom%E7%9A%84px%E9%AB%98%E5%BA%A6"><span class="toc-text">获取列表第一层dom的px高度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%97%B6%E9%97%B4%E8%8A%82%E6%B5%81"><span class="toc-text">页面滚动时间节流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-text">页面滚动事件处理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BE%85%E4%BC%98%E5%8C%96%E4%BA%8B%E9%A1%B9"><span class="toc-text">待优化事项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E5%92%8C%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8%E7%9A%84%E5%AF%B9%E6%AF%94%E3%80%82"><span class="toc-text">使用自定义组件和虚拟列表的对比。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
    </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    <i 
      class="iconfont icon-wenzhang_huaban" 
      style="padding-right: 2px;">
    </i>最近文章
  </div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-05-01</div>
        <a href="/2022/05/01/typescriptHome/"><div class="recent-posts-item-content">typescript</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptTheVariousWaysAndAdvantagesAndDisadvantagesOfDeepInheritance/"><div class="recent-posts-item-content">JavaScript深入之继承的多种方式和优缺点</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptGoFromPrototypeToPrototypeChain/"><div class="recent-posts-item-content">JavaScript深入之从原型到原型链</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptMemoryLeakTutorial/"><div class="recent-posts-item-content">JavaScript 内存泄漏教程</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    关注嘉然！顿顿解馋！
  </div>
  <div class="recent-posts-list">
    
      <img 
        src="https://api2.mubu.com/v3/document_image/2697c6ae-10ee-41a3-9099-304bdb252d31-3807603.jpg" 
        class="myadd-img" 
        alt="author avatar">
    
  </div>
</div>
  </article>
</div>
            </aside>
          </div>
        </div>
      </div>
    </div>
     
    <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>
          Copyright ©
          
            2020 -
          
          2022
        </span>
        &nbsp;
        <a 
          href="/" 
          class="footer-link">
          霜序廿的个人网站
        </a>
      </div>
    </div>

    
      <div class="footer-dsc">
        
          Powered by
          <a 
            href="https://hexo.io/" 
            class="footer-link" 
            target="_blank" 
            rel="nofollow noopener noreferrer">
            &nbsp;Hexo
          </a>
        
        
          <span>&nbsp;|&nbsp;</span>
        
        
          Theme -
          <a 
            href="https://github.com/theme-kaze" 
            class="footer-link" 
            target="_blank"
            rel="nofollow noopener noreferrer">
            &nbsp;Kaze
          </a>
        
      </div>
    
    
    
    
</footer> 
    
  <a 
    role="button" 
    id="scrollbutton" 
    class="basebutton" 
    aria-label="回到顶部">
    <i class="iconfont icon-arrowleft button-icon"></i>
  </a>

<a 
  role="button" 
  id="menubutton" 
  class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a 
  role="button" 
  id="popbutton" 
  class="basebutton" 
  aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a 
  role="button" 
  id="darkbutton" 
  class="basebutton darkwidget" 
  aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a 
  role="button" 
  id="searchbutton" 
  class="basebutton searchwidget" 
  aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a> 
     
     
     
      <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img')
    var i
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a')
      wrapper.setAttribute('href', img[i].getAttribute('data-src'))
      wrapper.setAttribute('aria-label', 'illustration')
      wrapper.style.cssText =
        'width: 100%; display: flex; justify-content: center;'
      if (img[i].alt) wrapper.dataset.caption = img[i].alt
      wrapper.dataset.nolink = true
      img[i].before(wrapper)
      wrapper.append(img[i])
      var divWrap = document.createElement('div')
      divWrap.classList.add('gallery')
      wrapper.before(divWrap)
      divWrap.append(wrapper)
    }
    baguetteBox.run('.gallery')
  }
</script>
<script>
  loadScript(
    "/js/lib/lightbox/baguetteBox.min.js",
    addImgLayout
  )
</script>
 
     
     
    <script src="/js/main.js"></script> 
     
    
      <script>
        var addLazyload = function () {
          var observer = lozad('.lozad', {
            load: function (el) {
              el.srcset = el.getAttribute('data-src')
            },
            loaded: function (el) {
              el.classList.add('loaded')
            },
          })
          observer.observe()
        }
      </script>
      <script>
        loadScript('/js/lib/lozad.min.js', addLazyload)
      </script>
     
    
    
  </body>
</html>
